<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>羽毛球记分牌-1.0</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            font-family: Arial, sans-serif;
            overflow: hidden;
            touch-action: none;
        }
        
        .container {
            display: flex;
            width: 100%;
            height: 100%;
        }
        
        .player {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 100%;
            color: #fff;
            font-size: 30vw;
            font-family: "Roboto", monospace;
            font-weight: bolder;
            text-shadow: 20px 20px 20px rgba(0, 0, 0, 0.9);
        }
        
        .score {
            font-size: 35vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .digit {
            display: inline-block;
            margin: 0 2px;
        }
        /* Use env() and constant() function to adapt safe area */
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

<body>
    <div class="container">
        <div class="player" id="player1">
            <div class="score" id="score1">
                <div class="digit" id="score1-tens">0</div>
                <div class="digit" id="score1-units">0</div>
            </div>
        </div>

        <div class="player" id="player2">
            <div class="score" id="score2">
                <div class="digit" id="score2-tens">0</div>
                <div class="digit" id="score2-units">0</div>
            </div>
        </div>
    </div>
    <audio id="soundCatWin" src="https://assets.mixkit.co/active_storage/sfx/93/93-preview.mp3"></audio>
    <audio id="soundCatLose" src="https://assets.mixkit.co/active_storage/sfx/94/94-preview.mp3"></audio>
    <audio id="soundDogWin" src="https://assets.mixkit.co/active_storage/sfx/1/1-preview.mp3"></audio>
    <audio id="soundDogLose" src="https://assets.mixkit.co/active_storage/sfx/468/468-preview.mp3"></audio>
    <audio id="soundCatFinal" src="https://assets.mixkit.co/active_storage/sfx/88/88-preview.mp3"></audio>
    <audio id="soundDogFinal" src="https://assets.mixkit.co/active_storage/sfx/1729/1729-preview.mp3"></audio>

    <script>
        const colors = [{
                left: "#1E1E1E",
                right: "#FF4500",
            }, // black-red
            {
                left: "#2F4F4F",
                right: "#FF8C00",
            }, // green-gold
            {
                left: "#191970",
                right: "#FF69B4",
            }, // blue-pink
            {
                left: "#006400",
                right: "#8B0000",
            }, // green-red
            {
                left: "#2E8B57",
                right: "#FF8C00",
            }, // green-orange
        ];

        // Select background color randomly
        const randomColor = colors[Math.floor(Math.random() * colors.length)];
        const leftBgColor = randomColor.left;
        const rightBgColor = randomColor.right;
        document.getElementById("player1").style.backgroundColor = leftBgColor;
        document.getElementById("player2").style.backgroundColor = rightBgColor;

        let score1 = 0;
        let score2 = 0;

        // Add '0' before digit if score is single digit
        function updateScore() {
            const score1Tens = document.getElementById("score1-tens");
            const score1Units = document.getElementById("score1-units");
            const score2Tens = document.getElementById("score2-tens");
            const score2Units = document.getElementById("score2-units");

            score1Tens.innerText = Math.floor(score1 / 10);
            score1Units.innerText = score1 % 10;
            score2Tens.innerText = Math.floor(score2 / 10);
            score2Units.innerText = score2 % 10;
        }

        /**
         * Check winner
         * @param {number} score1 - the score of player1.
         * @param {number} score2 - the score of player2.
         * @returns {string} winner or invalid value.
         */
        function determineWinner(score1, score2) {
            // Valid check
            if (
                score1 < 0 ||
                score2 < 0 ||
                !Number.isInteger(score1) ||
                !Number.isInteger(score2)
            ) {
                return "invalid";
            }

            // Check who wins
            if (score1 >= 21 && score1 - score2 >= 2) {
                return "player1";
            } else if (score2 >= 21 && score2 - score1 >= 2) {
                return "player2";
            }

            // First to 30
            if (score1 >= 29 && score1 > score2) {
                return "player1";
            } else if (score2 >= 29 && score2 > score1) {
                return "player2";
            }

            // Not yet
            return "";
        }

        function afterWin(player) {
            switch (player) {
                case "player1":
                    const player1 = document.getElementById("player1");
                    playSound("soundCatFinal");
                    document.getElementById("player2").style.display = "none";
                    player1.innerHTML = "猫党获胜！！！";
                    player1.style.width = "100%";
                    player1.classList.add("animate__animated", "animate__fadeInDown");
                    player1.style.fontSize = "13vw";
                    player1.style.fontFamily = "KaiTi";
                    break;
                case "player2":
                    document.getElementById("player1").style.display = "none";
                    const player2 = document.getElementById("player2");
                    playSound("soundDogFinal");
                    player2.innerHTML = "狗党获胜！！！";
                    player2.style.width = "100%";
                    player2.style.fontSize = "13vw";
                    player2.classList.add("animate__animated", "animate__bounceIn");
                    player2.style.fontFamily = "LiSu";
                    break;
                default:
                    console.error(`error`);
            }
        }

        // Check winner when doing calculation
        function checkWinner() {
            const winner = determineWinner(score1, score2);
            if (winner == "") {} else {
                afterWin(winner);
            }
        }

        let touchStartY = 0;

        // 监听 touchstart 事件，记录触摸起始位置
        document.addEventListener("touchstart", function(event) {
            touchStartY = event.touches[0].clientY;
        });

        // 监听 touchend 事件，判断触摸结束位置并处理
        document.addEventListener("touchend", function(event) {
            let touchEndY = event.changedTouches[0].clientY;
            if (touchEndY > touchStartY) {
                // 向下滑动
                const targetId = event.changedTouches[0].target.id;
                if (targetId === "score1-tens" || targetId === "score1-units") {
                    // 当玩家1得分
                    const score1Units = document.getElementById("score1-units");
                    const score1Tens = document.getElementById("score1-tens");
                    const oldScore1 = score1;

                    score1++;
                    playSound("soundCatWin");

                    // 检查十位数是否变化
                    if (Math.floor(oldScore1 / 10) !== Math.floor(score1 / 10)) {
                        score1Tens.classList.add("animate__animated", "animate__flipInX");
                        score1Tens.addEventListener('animationend', function() {
                            score1Tens.classList.remove("animate__animated", "animate__flipInX");
                        });
                    }
                    // 检查个位数是否变化
                    if (oldScore1 % 10 !== score1 % 10) {
                        score1Units.classList.add("animate__animated", "animate__flipInX");
                        score1Units.addEventListener('animationend', function() {
                            score1Units.classList.remove("animate__animated", "animate__flipInX");
                        });
                    }
                } else if (targetId === "score2-tens" || targetId === "score2-units") {
                    // 当玩家2得分
                    const score2Units = document.getElementById("score2-units");
                    const score2Tens = document.getElementById("score2-tens");
                    const oldScore2 = score2;

                    score2++;
                    playSound("soundDogWin");

                    // 检查十位数是否变化
                    if (Math.floor(oldScore2 / 10) !== Math.floor(score2 / 10)) {
                        score2Tens.classList.add("animate__animated", "animate__flipInX");
                        score2Tens.addEventListener('animationend', function() {
                            score2Tens.classList.remove("animate__animated", "animate__flipInX");
                        });
                    }
                    // 检查个位数是否变化
                    if (oldScore2 % 10 !== score2 % 10) {
                        score2Units.classList.add("animate__animated", "animate__flipInX");
                        score2Units.addEventListener('animationend', function() {
                            score2Units.classList.remove("animate__animated", "animate__flipInX");
                        });
                    }
                }
            } else if (touchEndY < touchStartY) {
                // 向上滑动
                const targetId = event.changedTouches[0].target.id;
                if (targetId === "score1-tens" || targetId === "score1-units") {
                    // 当玩家1失分
                    const score1Units = document.getElementById("score1-units");
                    const score1Tens = document.getElementById("score1-tens");
                    const oldScore1 = score1;

                    score1 = Math.max(0, score1 - 1);
                    playSound("soundCatLose");

                    // 检查十位数是否变化
                    if (Math.floor(oldScore1 / 10) !== Math.floor(score1 / 10)) {
                        score1Tens.classList.add("animate__animated", "animate__flipOutX");
                        score1Tens.addEventListener('animationend', function() {
                            score1Tens.classList.remove("animate__animated", "animate__flipOutX");
                        });
                    }
                    // 检查个位数是否变化
                    if (oldScore1 % 10 !== score1 % 10) {
                        score1Units.classList.add("animate__animated", "animate__flipOutX");
                        score1Units.addEventListener('animationend', function() {
                            score1Units.classList.remove("animate__animated", "animate__flipOutX");
                        });
                    }
                } else if (targetId === "score2-tens" || targetId === "score2-units") {
                    // 当玩家2失分
                    const score2Units = document.getElementById("score2-units");
                    const score2Tens = document.getElementById("score2-tens");
                    const oldScore2 = score2;

                    score2 = Math.max(0, score2 - 1);
                    playSound("soundDogLose");

                    // 检查十位数是否变化
                    if (Math.floor(oldScore2 / 10) !== Math.floor(score2 / 10)) {
                        score2Tens.classList.add("animate__animated", "animate__flipOutX");
                        score2Tens.addEventListener('animationend', function() {
                            score2Tens.classList.remove("animate__animated", "animate__flipOutX");
                        });
                    }
                    // 检查个位数是否变化
                    if (oldScore2 % 10 !== score2 % 10) {
                        score2Units.classList.add("animate__animated", "animate__flipOutX");
                        score2Units.addEventListener('animationend', function() {
                            score2Units.classList.remove("animate__animated", "animate__flipOutX");
                        });
                    }
                }
            }
            updateScore();
            checkWinner();
        });

        function playSound(soundId) {
            const sound = document.getElementById(soundId);
            sound.currentTime = 0; // Restart
            sound.play();
        }

        updateScore();
    </script>
</body>

</html>